<template>
    <div>
        <!--查询-->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline" size="mini">
                        <el-form-item label="架次" prop="planeNo">
                            <el-input v-model="formInline.planeNo" size="mini" placeholder="架次"></el-input>
                        </el-form-item>
                        <el-form-item label="AO号">
                            <el-input v-model="formInline.aoCode" size="mini" placeholder="AO号"></el-input>
                        </el-form-item>
                        <el-form-item label="图号">
                            <el-input v-model="formInline.itemCode" size="mini" placeholder="图号"></el-input>
                        </el-form-item>
                        <el-form-item label="质量编号">
                            <el-input v-model="formInline.qualityCode" size="mini" placeholder="型质量编号号"></el-input>
                        </el-form-item>
                        <el-form-item label="站位">
                            <el-input v-model="formInline.station" size="mini" placeholder="站位"></el-input>
                        </el-form-item>
                        <el-form-item label="分拣状态">
                            <el-select v-model="formInline.isSort" size="mini" placeholder="分拣状态">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="未分拣" value="N"></el-option>
                                <el-option label="已分拣" value="Y"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="配套状态">
                            <el-select v-model="formInline.state" size="mini" placeholder="配套状态">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="无库存" value="01"></el-option>
                                <el-option label="满配" value="02"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="配送状态">
                            <el-select v-model="formInline.status" size="mini" placeholder="配送状态">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="已装车未配送" value="00"></el-option>
                                <el-option label="已配送" value="02"></el-option>
                                <el-option label="未装车" value="01"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否下达日计划">
                            <el-select v-model="formInline.isDailyPlan" size="mini" placeholder="是否下达日计划">
                                <el-option label="请选择" value=""></el-option>
                                <el-option label="已下达" value="Y"></el-option>
                                <el-option label="未下达" value="N"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="mini" @click="doQuerey">查询</el-button>
                            <el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <!--表格显示-->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <div>
                        <el-radio v-model="radio" label="1" @click="raidoClick">查看配套明细</el-radio>
                        <el-radio v-model="radio" label="2" @click="raidoClick">查看配送托盘</el-radio>
                        <el-radio v-model="radio" label="3">查看配送明细</el-radio>
                        <el-radio v-model="radio" label="4">查看配送总计</el-radio>
                    </div>
                     <!--配套信息表格-->
                    <div v-if="radio==1">
                        <!--配套信息表格-->
                        <el-table :data="matchDetail.tableData" height="550" ref="matchTable" border style="width: 100%" highlight-current-row>
                            <el-table-column type="index" width="50" fixed></el-table-column>
                            <el-table-column prop="aoCode" label="AO号" width="180" fixed show-overflow-tooltip></el-table-column>
                            <el-table-column prop="isSort" label="分拣状态" fixed ></el-table-column>
                            <el-table-column prop="state" label="配套状态" fixed ></el-table-column>
                            <el-table-column prop="status" label="配送状态" width="160" fixed ></el-table-column>
                            <el-table-column prop="itemCode" label="图号" fixed width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="itemName" label="图号名称" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="mProductNumber" label="型号" ></el-table-column>
                            <el-table-column prop="qualityCode" label="质量编号"></el-table-column>
                            <el-table-column prop="newMesCheckQualiticationId" label="拆分后合格证号" width="180"></el-table-column>
                            <el-table-column prop="mesCheckQualiticationId" label="拆分前合格证号" width="180"></el-table-column>
                            <el-table-column prop="isPaper" label="是否带证"></el-table-column>
                            <el-table-column prop="wmsIsPaper" label="配送交接单是否带证" width="220"></el-table-column>
                            <el-table-column prop="repartAss" label="装配图号" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="itemQty" label="需求数量" ></el-table-column>
                            <el-table-column prop="matchQty" label="配套数量" ></el-table-column>
                            <el-table-column prop="packageCount" label="分拣数量" ></el-table-column>
                            <el-table-column prop="retrunQty" label="退库数量" ></el-table-column>
                            <el-table-column prop="secondMatchQty" label="二次配套数量" width="120"></el-table-column>
                            <el-table-column prop="productCode" label="机型" width="100"></el-table-column>
                            <el-table-column prop="batchNo" label="批次" width="100"></el-table-column>
                            <el-table-column prop="startPlaneNo" label="架次" width="100"></el-table-column>
                            <el-table-column prop="station" label="站位" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="toolCode" label="托盘编码" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="carCode" label="小车编码" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="dailyTime" label="日计划时间" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="sendDate" label="配送时间" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="addType" label="类型" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="receiveRemark" label="接收备注" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="wmsItemInventoryId" label="wmsItemInventoryId" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="msAoMatchInfoId" label="msAoMatchInfoId" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="msTaskAoId" label="msTaskAoId" width="180" show-overflow-tooltip></el-table-column>
                            <el-table-column prop="wmsDeliveryPlanId" label="配送交接单ID" width="180" show-overflow-tooltip></el-table-column>
                        </el-table>
                        
                    </div>
                    <div v-if="radio==2">
                        <el-table :data="sendTools.tableData" height="500" ref="toolTable" border style="width: 100%">
                            <el-table-column type="index" width="50" fixed></el-table-column>
                            <el-table-column prop="toolCode" label="托盘" width="180"  show-overflow-tooltip></el-table-column>
                            <el-table-column prop="carCode" label="小车"  show-overflow-tooltip></el-table-column>
                            <el-table-column prop="station" label="站位"  show-overflow-tooltip></el-table-column>
                            <el-table-column prop="status" label="状态"  show-overflow-tooltip></el-table-column>
                            <el-table-column prop="operate" label="操作" width="180" show-overflow-tooltip></el-table-column>
                        </el-table>
                    </div>
                    <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="page.currentPage"
                        :page-sizes="[20,100, 200, 300, 400,600,1000]" :page-size="page.pageSize"  layout="total, sizes, prev, pager, next" :total="page.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import request from "@/utils/request.js"
export default {
    name:"sortDeliveryAoQuery",
    data(){
        return{
            formInline:{planeNo:"",aoCode:"",itemCode:"",qualityCode:"",station:"",isSort:"",status:"",state:"",isDailyPlan:""},
            rules:{
                planeNo:[{ required: true, message: '请输入架次', trigger: 'blur' }]
            },
            matchDetail:{
                tableData:[]
            },
            sendTools:{
                tableData:[]
            },
            page:{currentPage:1,total:0,pageSize:20},
            radio:"1"
            
        }
    },
    methods:{

       
        // 导出
        exportExcel(){
            var searchParam =  {
                planeNo:this.formInline.planeNo,
                aoCode:this.formInline.aoCode,
                ItemCode:this.formInline.ItemCode,
                qualityCode:this.formInline.qualityCode,
                station:this.formInline.station,
                isSort:this.formInline.isSort,
                state:this.formInline.state,
                status:this.formInline.status,
                isDailyPlan:this.formInline.isDailyPlan,
                radio:this.radio
                };
                console.log("formInline",this.formInline);
                console.log("radio",this.radio);
            request.post("/exceltest/exportExcel",searchParam,{responseType:'blob'}).then((res) => {
                const aLink = document.createElement('a')
                var blob = new Blob([res.data], {type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"})
                // //从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment; filename=xxxx.docx") 设置的文件名;
                var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
                var contentDisposition = decodeURI(res.headers['content-disposition'])
                var result = patt.exec(contentDisposition)
                var fileName = result[1]
                fileName=fileName = fileName.replace(/\"/g, '')
                aLink.href = URL.createObjectURL(blob)
                aLink.setAttribute('download', fileName) // 设置下载文件名称
                document.body.appendChild(aLink)
                aLink.click()
                document.body.appendChild(aLink)
            })
        },
        doQuerey(){
            this.$refs["formInline"].validate((valid) => {
                if (valid) {
                    if(this.radio=="1"){
                        this.querySortDetail();
                    }else if(this.radio=="2"){
                        this.queryToolDetail();
                    }
                } else {
                    return false;
                }
            });
            
        },
        //查询配套信息详情
        querySortDetail(){
            request.post("/sortDeliveryRest/querySortInfo",{page:this.page,queryMap:this.formInline}).then((res)=>{
                console.log("res",res);
                this.matchDetail.tableData = res.data.list;
                this.page.total = res.data.total;
            });
        },
        //查询配送托盘详情
        queryToolDetail(){
            request.post("/sortDeliveryRest/querySendTool",{page:this.page,queryMap:this.formInline}).then((res)=>{
                console.log("res",res);
                this.sendTools.tableData = res.data.list;
                this.page.total = res.data.total;
            });
        },
        handleSizeChange(val){
            this.page.pageSize  = val;
            this.doQuerey();
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
            this.doQuerey();
        },
        raidoClick(){
            if(this.radio=="1"){
                this.$refs.matchTable.doLayout();
            }else if(this.radio=="2"){
                this.$refs.toolTable.doLayout();
            }
        }
    }
}
</script>
<style>

.el-form-item input{
    width:170px;
}
/****
**固定表格列与滚动条冲突 样式
*/
.el-table__fixed{
    height:auto!important;
    bottom:17px;
    position:absolute;
    top:0;
    left:0;
}
</style>